<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器的应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
            left: 0;
        }
    </style>
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var timer;//定义一个变量，用来保存定时器的标识
            //点击btn01按钮以后使box1移动 box1 （left的值增加）
            btn01.onclick=function () {
                //开启定时器之前 关闭上一个定时器
                clearInterval(timer);
                //开启一个定时器 用来执行动画效果
                timer= setInterval(function () {
                    //获取box1原来的值
                    var oldValue=parseInt(getStyle(box1,"left"));//把字符串中的合法数字给提取出来
                    var newValue=oldValue+50;
                    //判断newValue是否大于800
                     if (newValue>800){
                         newValue=800;
                     }
                    box1.style.left=newValue+"px";//将新值设置给box1
                    //当元素移动到800时 则停止执行动画，
                    if (newValue===800){
                        clearInterval(timer);
                    }
                 },300)
            }
        };
        //获取当前元素的样式 获取元素的任意样式
        function getStyle(obj,name) {
            if (window.getComputedStyle){
                //正常浏览器的方式 具有getComputedStyle()的方法
                return getComputedStyle(obj,null)[name];
            }else {
                //IE8用
                return  obj.currentStyle[name]; //current当前的
            }//第一种方式 也可以用下面的三元运算符 ture?语句1：语句2
            // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
    </script>
</head>
<body>
<script>
    /*parseInt()把字符串中的合法数字给提取出来
    *
    *
    *
    * */
</script>
<button id="btn01">点击按钮以后box1向右移动</button>
<br>
<br>
<div id="box1"></div>
<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top:0"></div>
</body>
</html>